<template>
  <div class="app-container">
    <el-form ref="form" label-width="250px">
      <el-form-item label="战令周期天数:">
        <div>{{listData.war_day}}</div>
      </el-form-item>
      <el-form-item label="批次:">
        <div>{{listData.batch}}</div>
      </el-form-item>
      <el-form-item label="战令开始时间:">
        <div>{{listData.start_time}}</div>
      </el-form-item>
      <el-form-item label="战令结束时间:">
        <div>{{listData.end_time}}</div>
      </el-form-item>
      <el-form-item label="战令周期消费到达数额升级特殊奖励:">
        <div>{{listData.special_money}}</div>
      </el-form-item>
      <el-form-item label>
        <el-button type="primary" @click="setWar">设置战令</el-button>
      </el-form-item>
    </el-form>

    <!-- 设置战令抽屉 -->
    <el-drawer
      title="设置战令"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="150px">
        <el-form-item label="战令周期天数" prop="war_day">
          <el-input v-model="form.war_day" style="width:260px" placeholder="填写战令周期天数"></el-input>
        </el-form-item>
        <el-form-item label="自动续期" prop="is_auto">
          <el-select v-model="form.is_auto" style="width:260px" placeholder="请选择是否自动续期">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="战令开关" prop="status">
          <el-select v-model="form.status" style="width:260px" placeholder="请选择是否开启战令">
            <el-option label="开启" value="1"></el-option>
            <el-option label="关闭" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="特殊奖励解锁经验" prop="special_money">
          <el-input v-model="form.special_money" style="width:260px" placeholder="请输入升级特殊奖励所需经验"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即设置</el-button>
          <el-button @click="subCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { warSet, warSettings } from "@/api/war";
import { parseTime } from "@/utils/index";

export default {
  name: "WarSet",
  data() {
    return {
      listData: "",
      // 抽屉
      drawer: false,
      direction: "rtl",
      form: {
        war_day: "",
        is_auto: "",
        status: "",
        special_money: ""
      },
      rules: {
        war_day: [
          { required: true, message: "请输入战令周期天数", trigger: "blur" }
        ],
        is_auto: [
          { required: true, message: "请选择是否自动续期", trigger: "blur" }
        ],
        status: [
          { required: true, message: "请选择是否开启战令", trigger: "blur" }
        ],
        special_money: [
          {
            required: true,
            message: "请输入升级特殊奖励所需经验",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.getWarSet();
  },
  methods: {
    async getWarSet() {
      const res = await warSet();
      console.log(res);
      this.listData = res.data;
      this.listData.start_time = parseTime(res.data.start_time);
      this.listData.end_time = parseTime(res.data.end_time);
      this.form.war_day = this.listData.war_day;
      this.form.is_auto = this.listData.is_auto;
      this.form.status = this.listData.status;
      this.form.special_money = this.listData.special_money;
    },
    handleClose(done) {
      this.form.war_day = this.listData.war_day;
      this.form.is_auto = this.listData.is_auto;
      this.form.status = this.listData.status;
      this.form.special_money = this.listData.special_money;
      done();
    },
    setWar() {
      this.drawer = true;
    },
    subCancel() {
      this.resetForm("form");

      this.form.war_day = this.listData.war_day;
      this.form.is_auto = this.listData.is_auto;
      this.form.status = this.listData.status;
      this.form.special_money = this.listData.special_money;
      this.drawer = false;
    },
    onSubmit() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          console.log(this.form);
          const res = await warSettings({ ...this.form });
          if (res.st === 1) {
            this.resetForm("form");
            this.getWarSet();
            this.form.war_day = this.listData.war_day;
            this.form.is_auto = this.listData.is_auto;
            this.form.status = this.listData.status;
            this.form.special_money = this.listData.special_money;
            this.$message({
              message: "设置成功",
              type: "success"
            });
            this.drawer = false;
          } else {
            console.log(res);
            this.$message.error("设置失败");
          }
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style>
</style>